<template>
  <div class="system-user-dialog-container">
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.title" width="900px">
      <el-form ref="dialogFormRef" :model="state.ruleForm" :rules="rules" label-width="120px" size="default">
        <el-form-item label="配置key" prop="configKey">
          <el-input v-model="state.ruleForm.configKey" :disabled="formReadonly" clearable
                    placeholder="请输入配置key"/>
        </el-form-item>
        <el-form-item label="访问站点" prop="endpoint">
          <el-input v-model="state.ruleForm.endpoint" :disabled="formReadonly" clearable
                    placeholder="请输入访问站点"/>
        </el-form-item>
        <el-form-item label="自定义域名" prop="domain">
          <el-input v-model="state.ruleForm.domain" :disabled="formReadonly" clearable
                    placeholder="请输入自定义域名"/>
        </el-form-item>
        <el-form-item label="accessKey" prop="accessKey">
          <el-input v-model="state.ruleForm.accessKey" :disabled="formReadonly" clearable
                    placeholder="请输入accessKey"/>
        </el-form-item>
        <el-form-item label="secretKey" prop="secretKey">
          <el-input v-model="state.ruleForm.secretKey" :disabled="formReadonly" clearable
                    placeholder="请输入秘钥"/>
        </el-form-item>
        <el-form-item label="桶名称" prop="bucketName">
          <el-input v-model="state.ruleForm.bucketName" :disabled="formReadonly" clearable
                    placeholder="请输入桶名称"/>
        </el-form-item>
        <el-form-item label="前缀" prop="prefix">
          <el-input v-model="state.ruleForm.prefix" :disabled="formReadonly" clearable
                    placeholder="请输入前缀"/>
        </el-form-item>
        <el-form-item label="是否HTTPS">
          <el-radio-group v-model="state.ruleForm.isHttps" :disabled="formReadonly">
            <el-radio
                v-for="dict in sys_yes_no"
                :key="dict.value"
                :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="桶权限类型">
          <el-radio-group v-model="state.ruleForm.accessPolicy" :disabled="formReadonly">
            <el-radio label="0">private</el-radio>
            <el-radio label="1">public</el-radio>
            <el-radio label="2">custom</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="域" prop="region">
          <el-input v-model="state.ruleForm.region" :disabled="formReadonly" placeholder="请输入域"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="state.ruleForm.remark" :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入备注信息"
                    type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="onCancel">取 消</el-button>
					<el-button size="default" type="primary" @click="onSubmit(dialogFormRef)">
						{{ state.dialog.submitTxt }}
					</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="configDialog" setup>
import {computed, getCurrentInstance, nextTick, reactive, ref} from 'vue';
import type {FormInstance, FormRules} from 'element-plus';
import {ElMessage} from 'element-plus';
import {ossConfigApi} from "/@/api/sys/ossConfig";

const {proxy} = getCurrentInstance();
const {sys_yes_no} = proxy.useDict("sys_yes_no");
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive({
  ruleForm: {
    ossConfigId: '',
    configKey: '',
    accessKey: '',
    secretKey: '',
    bucketName: '',
    prefix: '',
    endpoint: '',
    domain: '',
    isHttps: "N",
    accessPolicy: "1",
    region: '',
    status: "1",
    remark: '',
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
});

const backupFormData = JSON.parse(JSON.stringify(state.ruleForm));

const rules = reactive<FormRules>({
  configKey: [{required: true, message: '不能为空', trigger: 'blur'}],
  accessKey: [
    {required: true, message: '不能为空', trigger: 'blur'},
    {
      min: 2,
      max: 200,
      message: "accessKey长度必须介于 2 和 100 之间",
      trigger: "blur",
    },
  ],
  secretKey: [
    {required: true, message: '不能为空', trigger: 'blur'},
    {
      min: 2,
      max: 100,
      message: "secretKey长度必须介于 2 和 100 之间",
      trigger: "blur",
    },
  ],
  bucketName: [
    {required: true, message: "bucketName不能为空", trigger: "blur"},
    {
      min: 2,
      max: 100,
      message: "bucketName长度必须介于 2 和 100 之间",
      trigger: "blur",
    },
  ],
  endpoint: [
    {required: true, message: "endpoint不能为空", trigger: "blur"},
    {
      min: 2,
      max: 100,
      message: "endpoint名称长度必须介于 2 和 100 之间",
      trigger: "blur",
    },
  ],
  accessPolicy: [
    {required: true, message: "accessPolicy不能为空", trigger: "blur"}
  ]
});
// 打开弹窗
const openDialog = (type: string, row: any) => {
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
  if (type === 'edit') {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.dialog.title = '修改配置';
    state.dialog.submitTxt = '修 改';
  } else if (type === 'add') {
    state.dialog.title = '新增配置';
    state.dialog.submitTxt = '新 增';
    nextTick(() => {
      state.ruleForm = backupFormData;
    });
  }
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (state.dialog.type === 'add') {
        ossConfigApi()
            .addOssConfig(state.ruleForm)
            .then((res) => {
              if (res && res.code === 200) {
                ElMessage.success(res.msg || '新增成功');
                closeDialog();
                emit('refresh');
              }
            });
      } else if (state.dialog.type === 'edit') {
        ossConfigApi()
            .updateOssConfig(state.ruleForm)
            .then((res) => {
              if (res && res.code === 200) {
                ElMessage.success(res.msg || '修改成功');
                closeDialog();
                emit('refresh');
              }
            });
      }
    }
  });
};
const formReadonly = computed(() => {
  return state.dialog.type !== 'add' && state.dialog.type !== 'edit'
})
// 暴露变量
defineExpose({
  openDialog,
});
</script>
